<script>
//局部注册所有配置部件
import chartParts from './parts';
import ConfigFactory from './config/config-factory';

/*
 * 图表配置编辑器组件
 */
export default {
  name: 'ChartConfig',
  components: chartParts,
  props: {
    //图表类型
    chartType: {
      type: String,
      default() {
        return '';
      },
    },
  },
  data() {
    return {
      currentItem: '', //当前展开配置项
      parts: [], //配置部件集合
    };
  },
  watch: {
    chartType(value) {
      this.createUI(value);
    },
  },
  created() {
    this.createUI(this.chartType);
  },
  methods: {
    //创建图表UI
    createUI(type) {
      if (type) {
        this.parts = ConfigFactory.getParts(type);
        this.currentItem = this.parts[0].partId;
      }
    },
  },
};
</script>

<template>
  <div class="config-wrapper">
    <Collapse
      v-model="currentItem"
      accordion>
      <Panel
        v-for="item in parts"
        :key="item.partId"
        :name="item.partId">
        {{ item.partName }}
        <div slot="content">
          <component
            :is="item.part"
            :options="item.defaultOpts"></component>
        </div>
      </Panel>
    </Collapse>
  </div>
</template>

<style lang="less">
.config-wrapper {
  width: 300px;
  margin: 0 10px;
  height: 68vh;
  overflow-y: auto;

  .k-collapse > .k-collapse-item > .k-collapse-header {
    padding-left: 20px;
  }

  .k-collapse-content > .k-collapse-content-box {
    padding: 10px 0;
  }

  .k-collapse-content > .k-collapse-content-box .k-row {
    line-height: 32px;
    margin-top: 2px;
  }

  .k-collapse-content > .k-collapse-content-box .k-row .k-input,
  .k-input-number {
    width: 100%;
  }

  .k-collapse-content > .k-collapse-content-box .switch-box .k-row {
    margin-top: 5px;
  }
}
</style>
